
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <!--<ion-buttons start>-->
      <!--<button tappable ion-button icon-only (click)="goHomeMenuPage()">-->
        <!--<ion-icon color="Gray-color" name="menu"></ion-icon>-->
      <!--</button>-->
    <!--</ion-buttons>-->
    <ion-title>
      <div style="margin: 15px 0" >
        <p>{{ 'CONSUME.TITLE' | translate }}</p>
      </div>
    </ion-title>
    <ion-buttons *ngIf="messageCount > 0" end>
      <button tappable ion-button icon-only (click)="gotoUnreadMessage()" >
        <ion-icon color="Gray-color" name="ios-mail-outline">
          <ion-badge class="bage-message">{{messageCount}}</ion-badge>
        </ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button tappable ion-button icon-only (click)="gotoHomePage()" >
        <ion-icon color="Gray-color" name="ios-home-outline">
        </ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button tappable ion-button icon-only (click)="goSettingPage()" >
        <ion-icon color="Gray-color" name="settings">
        </ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>


<ion-content>
  <super-tabs scrollTabs  [selectedTabIndex]="selectedTabIndex" style="width: 100vw">
    <super-tab [root]="page1" [rootParams]="navParams" title="{{ 'CONSUME.FIR' | translate }}" ></super-tab>
    <super-tab [root]="page2" [rootParams]="navParams" title="{{ 'CONSUME.SEC' | translate }}" ></super-tab>
    <super-tab [root]="page3" [rootParams]="navParams" title="{{ 'CONSUME.THR' | translate }}" ></super-tab>
  </super-tabs>

</ion-content>
